<template>
  <div>
    <el-upload
      :class="errorStyle===true? 'avatar-uploader-error' : 'avatar-uploader'"
      :action="action"
      :headers="headers"
      :show-file-list="false"
      :on-change="handleChange"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload">
      <div v-if="img" class="avatar" @click="imgfilter">
        <img :src="img">
        <div class="image-mask">
          <i class="el-icon-view" @click="show" />
          <i class="el-icon-plus" />
          <i class="el-icon-delete" @click="remove" />
        </div>
      </div>
      <i v-else class="el-icon-plus avatar-uploader-icon" />
    </el-upload>
    <el-dialog
      width="60%"
      title="查看"
      :visible.sync="innerVisible"
      append-to-body
    >
      <img :src="img">
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    action: {
      type: String,
      required: true
    },
    headers: {
      type: Object,
      default() {
        return {}
      }
    },
    img: {
      type: String,
      default: ''
    },
    // 图片上传格式限制，默认是png,jpg
    imgFormats: {
      type: Array,
      default: () => ['image/png', 'image/jpeg']
    },
    // 图片上传大小限制，单位是mb,默认1024
    fileSize: {
      type: Number,
      default: 1024
    },
    // 配合表单验证时不通过是否显示红色边框(默认不显示)
    errorStyle: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      innerVisible: false
    }
  },
  methods: {
    handleChange(file, fileList) {
      this.$emit('uploadChange', file, fileList)
    },
    handleAvatarSuccess(res, file) {
      this.$emit('uploadSuccess', res.data)
    },
    beforeAvatarUpload(file) {
      const isForma = this.checkImgFormat(file.type)
      const isLtMB = file.size / 1024 / 1024 < this.fileSize

      if (!isForma) {
        this.$message.error('图片格式不正确!')
      }
      if (!isLtMB) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isForma && isLtMB
    },
    remove() {
      this.$emit('uploadRemove')
    },
    show() {
      this.innerVisible = true
    },
    // 检查格式
    checkImgFormat(imgFormat) {
      if (this.imgFormats.length === 0) {
        return true
      } else {
        for (const format of this.imgFormats) {
          if (format === imgFormat) {
            return true
          }
        }
        return false
      }
    },
    imgfilter(e) {
      // 在改dom层过滤事件只有点击+上传时通过
      if (e.target._prevClass !== 'el-icon-plus') {
        e.cancelBubble = true
        // e.cancelBubble = true或者e.stopPropagation()都能阻止事件传播
      }
    }
  }
}
</script>
<style>
/* 为适应表单验证添加 */
  .avatar-uploader-error .el-upload {
    border: 1px solid #F56C6C;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
    position: relative;
  }
  .avatar img {
		width: 178px;
		height: 178px;
	}
  /* 自定义遮罩层 */
  .image-mask {
		position: absolute;
		width: 100%;
	  height: 100%;
		bottom: 0;
		background: rgba(101, 101, 101, 0.8);
		color: #ffffff;
		opacity: 0;
		line-height: 178px;
    font-size: 25px;
	}
	.avatar:hover .image-mask {
		opacity: 1;
		cursor: default;
	}
  .image-mask i {
    width: 50px;
    cursor: pointer;
  }
</style>
